<template>
    <div class="context-menu" id="customContextMenu">
        <ul>
            <li v-for="(item,index) in data" :key="index" @click="item.call">{{ item.name }}</li>
            <!-- <li id="menu-item-cut">添加动画</li>
            <li id="menu-item-paste">添加容器</li>
            <li id="menu-item-delete">删除</li> -->
        </ul>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
interface MenuItem{
  name:string,
  call:()=>void
}
export default defineComponent({
    name:'ContextMenu',
    props:{
      data:Array as () => Array<MenuItem>
    },
    setup() {
        return {}
    }
})
</script>
<style lang="scss" scoped>
.context-menu {
  position: absolute;
  background-color: #fff;
  border: 1px solid #e9e9e9;
  
  padding: 5px 0;
  z-index: 1000;
  border-radius: 10px;
  box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3);
  ul{
    padding: 0;
  li {
  padding: 3px 20px;
  cursor: pointer;
  list-style-type: none;
  &:hover {
  background-color: #ddd;
}
}
  }
}
</style>